<template>
  <div id="app">
    <nav>
      <span class="care"
        >Pet<span style="color: red; margin: 0">.</span>care</span
      >
      <ul>
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: activeIndex == index }"
          @click="activeIndex = index"
        >
          {{ item.navItem }}
        </li>
      </ul>
      <span class="right">
        <span>Sign&nbsp;up</span
        ><img class="img" src="../../static/退出-removebg-preview.png" />
      </span>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { name: "#", navItem: "Home" },
        { name: "#", navItem: "Services" },
        { name: "#", navItem: "Training" },
        { name: "#", navItem: "Madi-care" },
      ],
      activeIndex: 0,
    };
  },
  methods: {},
};
</script>

<style scoped>
#app {
  width: 100%;
}
nav {
  display: flex;
  justify-content: space-around;
  width: 80%;
  align-content: center;
  margin: 20px auto;
  border-bottom: 1px solid #000;
}
.care {
  font-size: 25px;
  line-height: 50px;
  font-weight: 700;
  width: 15%;
}
ul {
  width: 70%;
  list-style: none;
  margin-top: 10px;
  text-align: center;
}
li {
  display: inline-block;
  margin: 0 30px;
  line-height: 30px;
}

.active {
  border-bottom: 1px solid black;
  font-weight: 700;
}
.active::after {
  content: "|";
  position: relative;
  left: -50%;
  bottom: -23px;
  border: none;
  height: 1px;
}
.right {
  width: 15%;
  /* margin: 0;
  border: 0;
  padding: 0; */
  line-height: 50px;
  text-align: end;
  white-space: nowrap;
}
.img {
  padding-left: 10%;
  vertical-align: middle;
  width: 22px;
}
</style>